<template>
    <el-tabs v-model="activeName" type="border-card" style=" position: relative">
        <el-tab-pane label="会员注册" name="first">
            <div style="margin: 10px 0">
                <span>请输入会员id/手机号：</span>
                <el-input v-model="memberNum" placeholder="请输入会员id/手机号" clearable></el-input>
                <el-button type="primary" icon="el-icon-search" @click="chaxun"></el-button>
            </div>
            <h1 style="padding: 20px 0">会员信息</h1>
            <div v-show="oneShow" style="padding: 30px 0">
                <el-table
                        :cell-style="cellStyle"
                        :header-cell-style="rowClass"
                        :data="tableData"
                        border
                        style="width: 100%;height: 400px">
                    <el-table-column
                            prop="name"
                            label="会员姓名">
                    </el-table-column>
                    <el-table-column
                            prop="number"
                            label="会员ID">
                    </el-table-column>
                    <el-table-column
                            prop="tel"
                            label="会员手机号">
                    </el-table-column>
                    <el-table-column
                            prop="state"
                            label="会员状态">
                    </el-table-column>
                    <el-table-column
                            prop="discount"
                            label="可享折扣">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="余额">
                    </el-table-column>
                    <el-table-column
                            prop="mergeTime"
                            label="最近一次使用时间">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="chongzhi">充值</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @current-change="handleCurrentChange"
                        :page-size=this.pageSize
                        :pager-count="7"
                        layout="prev, pager, next"
                        :total=this.total
                        style="position: absolute; bottom: 0;left: 500px"
                >
                </el-pagination>
            </div>
            <div v-show="twoShow" style="padding: 30px 0">
                <el-table
                        :cell-style="cellStyle"
                        :header-cell-style="rowClass"
                        :data="chaxunData"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="会员姓名">
                    </el-table-column>
                    <el-table-column
                            prop="number"
                            label="会员ID">
                    </el-table-column>
                    <el-table-column
                            prop="tel"
                            label="会员手机号">
                    </el-table-column>
                    <el-table-column
                            prop="state"
                            label="会员状态">
                    </el-table-column>
                    <el-table-column
                            prop="discount"
                            label="可享折扣">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="余额">
                    </el-table-column>
                    <el-table-column
                            prop="mergeTime"
                            label="最近一次使用时间">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="chongzhi">充值</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button type="primary" @click="fanhui" style="margin: 30px 0">返回</el-button>
            </div>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import axios from '../../http/http'
    import * as api from '../../http/api'
    export default {
        name: "tt_hycx",
        data(){
            return{
                activeName:'first',
                oneShow:true,
                twoShow:false,
                memberNum:'',
                tableData:[],
                chaxunData:[],
                pageSize: 5,
                total:0,//默认值是number
                currentPage: 1,

            }
        },
        methods:{
            cellStyle(){
                return "text-align: center;"
            },
            rowClass(){
                return "text-align: center;"
            },
            chaxun(){
                if (this.memberNum!='') {
                    axios({
                        url: api.selectMember,
                        method:'get',
                        params:{condition:this.memberNum}
                    }).then(res=>{
                        this.chaxunData=[];
                        console.log(res);
                        if (res.data.code===200) {
                            this.oneShow=false;
                            this.twoShow=true;
                            if (res.data.info.state===0) {
                                res.data.info.state='正常'
                            }else {
                                res.data.info.state='挂失'
                            }
                            this.chaxunData.push(res.data.info);
                            console.log(this.chaxunData)
                        }else {
                            this.$message.error('没有找到该会员')
                        }
                    })
                }else {
                    this.$message.error('请输入会员id/手机号码')
                }
            },
            fanhui(){
                this.oneShow=true;
                this.twoShow=false
            },
            chongzhi(){
                this.$router.push('./tt_hycz')
            },
            handleCurrentChange(val){
                this.currentPage=val;
                axios({
                    url:api.hycx,
                    method:'post',
                    data:{
                        currentPage:this.currentPage,
                        pageSize:this.pageSize
                    }
                }).then(res=>{
                    for (let i =0;i<res.data.info.length;i++) {
                        if (res.data.info[i].state===0) {
                            res.data.info[i].state='正常'
                        }else {
                            res.data.info[i].state='挂失'
                        }
                    }
                    this.tableData=res.data.info;
                    this.total=res.data.pager.totalSize;
                }).catch(err=>{
                    console.log(err)
                })
            },
        },
        created() {
            axios({
                url:api.hycx,
                method:'post',
                data:{
                    currentPage:this.currentPage,
                    pageSize:this.pageSize
                }
            }).then(res=>{
                for (let i =0;i<res.data.info.length;i++) {
                    if (res.data.info[i].state===0) {
                        res.data.info[i].state='正常'
                    }else {
                        res.data.info[i].state='挂失'
                    }
                }
                this.tableData=res.data.info;
                this.total=res.data.pager.totalSize;
            }).catch(err=>{
                console.log(err)
            })
        }
    }
</script>

<style scoped lang="less">
    .el-input{
        width: 200px;
        margin: 0 20px;
    }
</style>